<template>
	<cover-view class="tabbar">
		<cover-view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item)">
			<cover-image class="item-img" :src="item.selected" v-if="current == index"></cover-image>
			<cover-image class="item-img" :src="item.active" v-else></cover-image>
			<cover-view class="item-name" :class="{'tabbarActive' :current == index}" v-if="item.text">{{item.text}}
			</cover-view>
		</cover-view>
	</cover-view>
</template>

<script>
import {mapGetters} from 'vuex'
import {isLogins} from '@/utils/isLogin'
	export default {
		props: {
			current: Number
		},
		data() {
			return {
				list: [{
					"path": "/pages/index/index",
					"active": "/static/tabbar/employment.png",
					"selected": "/static/tabbar/employmentSelected.png",
					"text": "招聘"
				}, {
					"path": "/pages/message/message",
					"active": "/static/tabbar/message.png",
					"selected": "/static/tabbar/messageSelected.png",
					"text": "消息",
          "isLogin":true
				}, {
					"path": "/pages/publish/publish",
					"active": "/static/tabbar/publish.png",
					"selected": "/static/tabbar/publishSelected.png",
					"text": "发布",
          "isLogin":true
				}, {
					"path": "/pages/my/my",
					"active": "/static/tabbar/my.png",
					"selected": "/static/tabbar/mySelected.png",
					"text": "我的",
          "isLogin":true
				}]
			};
		},
		created() {

		},
    computed:{
      ...mapGetters(['token'])
    },
		watch: {

		},
		methods: {
			tabbarChange(item) {
        if(item.isLogin){
          if(!this.token){
            isLogins()
            return
          }
          uni.switchTab({
          	url: item.path
          })
        } else {
          uni.switchTab({
            url: item.path
          })
        }

			}
		}
	};
</script>

<style lang="scss" scoped>
	.tabbarActive {
		color: #4FB5B6 !important;
	}
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		border-top: #CCCCCC 1rpx solid;
    z-index: 10;
		.tabbar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100rpx;
			.item-img {
				margin-bottom: 4rpx;
				width: 46rpx;
				height: 46rpx;
			}
			.item-name {
				font-size: 24rpx;
				color: #A3A3A3;
			}
		}
	}
</style>
